<template>
  <div id="box">
    <div id="header">
      <input v-model="content" @keyup.enter="_sent" style="width: 300px;">
    </div>
    <ul>
      <li v-for="item in comments" :key="item.id">
        <div>{{ item.content }}</div>
        <div>{{ changeTime(item.pub_time) }}</div>
        <button @click="_del(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { load, sent, del, changeTime } from './api/comment';
const content = ref('');
const comments = ref([]);
// 挂载时加载评论
onMounted(() => {
  _load();
});

// 加载评论
const _load = async () => {
  let  data  = await load()
  comments.value = data
};

// 发布评论
const _sent = async () => {
  await sent({ content: content.value })
  content.value = ''
  _load()
};

const _del = async (id) => {
  if (!confirm('确定要删除这条评论吗？')) {
    return
  }
  await del(id)
  _load();
};


</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  box-sizing: border-box;
}

#box {
  width: 300px;
}

#header,
ul li {
  display: flex;
  justify-content: space-between;
}
</style>